<template>
<h2>demo09-form01.vue</h2>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">双向绑定</div>
    <div  class="zhtt-demo-card-body">
      <p class="zhtt-line">
        <input  class="zhtt-input" v-model="name"><br/>
        您输入的是：{{name}}
      </p>
      <p class="zhtt-line">
        <input  class="zhtt-input" v-model="name1"><br/>
        您输入的是：{{name1}}
      </p>
      <p class="zhtt-line">
        <input  class="zhtt-input" v-model="name2"><br/>
        您输入的是：{{name2}}
      </p>
    </div>
    <div class="zhtt-demo-card-footer">
      不能添加value属性，不然报错（ value="名称"）<br/>
    </div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">textarea</div>
    <div  class="zhtt-demo-card-body">
      <p class="zhtt-line">
        <textarea v-model="textarea" cols="70" rows="4"></textarea><br/>
        您输入的是：{{textarea}}
      </p>
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">Checkbox</div>
    <div  class="zhtt-demo-card-body">
      <p class="zhtt-line">
        <input type="checkbox" id="checkbox" v-model="checkbox">
        <label for="checkbox"> 输入框的值：{{checkbox}}</label>
      </p>
      <p class="zhtt-line">
        <input type="checkbox" id="checkbox2" v-model="checkbox2" true-value="yes" false-value="no" />
        <label for="checkbox2"> 输入框的值：{{checkbox2}}</label>
      </p>
      <p class="zhtt-line">
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
        <label for="jack">Jack</label>&nbsp;&nbsp;
        <input type="checkbox" id="john" value="John" v-model="checkedNames" />
        <label for="john">John</label>&nbsp;&nbsp;
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
        <label for="mike">Mike</label>&nbsp;&nbsp;
        <br />
        <span>Checked names: {{ checkedNames }}</span>
      </p>
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">单选框 (Radio)</div>
    <div  class="zhtt-demo-card-body">
      <p class="zhtt-line">
        <input type="radio" id="one" value="One" v-model="radioModel" />
        <label for="one">One</label>
        <br />
        <input type="radio" id="two" value="Two" v-model="radioModel" />
        <label for="two">Two</label>
        <br />
        输入框的值：{{radioModel}}
      </p>
      <p class="zhtt-line">
        <input type="radio" v-model="radioModel2" v-bind:value="radioModel2Value1" />{{radioModel2Value1}}&nbsp;&nbsp;
        <input type="radio" v-model="radioModel2" v-bind:value="radioModel2Value2" />{{radioModel2Value2}}&nbsp;&nbsp;
        输入框的值：{{radioModel2}}<br/>
        <button @click="updateRadioModel2" class="zhtt-btn">修改单选按钮value</button>
      </p>
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">下拉框 (select)</div>
    <div  class="zhtt-demo-card-body">
      <p class="zhtt-line">
        <select class="zhtt-select" v-model="selected">
          <option disabled value="">Please select one</option>
          <option>A</option>
          <option>B</option>
          <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>
      </p>
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>
</template>

<script>
export default {
  name: "demo09-form01",
  data() {
    return {
      name1: '',
      textarea:`
      不能这样：<textarea>{{ text }}</textarea>
      需要这样：<textarea v-model="text"></textarea>
      `,
      checkbox:null,
      checkbox2:null,
      checkedNames:[],
      radioModel:'',
      radioModel2:'',
      radioModel2Value1:'1',
      radioModel2Value2:'2',
      selected:''
    }
  },
  methods:{
    updateRadioModel2(){
      this.radioModel2Value1 = Math.floor(Math.random()*500);
      this.radioModel2Value2 = Math.floor(Math.random()*500);
    }
  }
}
</script>

<style scoped>

</style>